<template>
	<view class="onlineResume">
		<up-navbar title="我的在线简历" @leftClick="leftClick" bgColor="#59a0ff" safeAreaInsetTop placeholder>
		</up-navbar>
		<div class="first-card" @click="openPersonalMessage">
			<up-row>
				<up-col span="8">
					<up-row>
						<up-col span="6">
							<up-text :text="resume.name" color="#59A0FF" size="30px" :bold="true"
								style="margin-left: 20px;margin-top: 20px;"></up-text>
						</up-col>
					</up-row>
					<up-row>
						<up-text :text="resume.phone" size="15px" :bold="true"
							style="margin-top: 5px;margin-left: 20px;"></up-text>
					</up-row>
					<up-row>
						<up-text
							:text="`${this.resume.graduationYear}毕业生 · ${this.resume.age}岁 · ${this.resume.education}`"
							size="15px" :bold="true" style="margin-top: 5px;margin-left: 20px;"></up-text>
					</up-row>
				</up-col>
				<up-col span="4" offset="0.5">
					<up-row style="height: 80px;">
						<div class="head-img">
							<up-image :src="`../../static/${this.resume.image}`" width="70px" height="70px"
								shape="circle"></up-image>
						</div>
					</up-row>
					<up-row>
						<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="12" height="12"
							style="margin-top: 20px;" fill="currentColor">
							<path
								d="M16.7574 2.99678L14.7574 4.99678H5V18.9968H19V9.23943L21 7.23943V19.9968C21 20.5491 20.5523 20.9968 20 20.9968H4C3.44772 20.9968 3 20.5491 3 19.9968V3.99678C3 3.4445 3.44772 2.99678 4 2.99678H16.7574ZM20.4853 2.09729L21.8995 3.5115L12.7071 12.7039L11.2954 12.7064L11.2929 11.2897L20.4853 2.09729Z">
							</path>
						</svg>
						<up-text text="编辑个人信息" style="margin-top: 15px;"></up-text>
					</up-row>
				</up-col>
			</up-row>
		</div>
		<div class="second-card">
			<up-cell-group :border="false">
				<up-cell @click="openStatusSelect" :border="false">
					<template #title>
						<view class="u-slot-title">
							<up-text text="求职状态" color="#59A0FF" size="20px" :bold="true"></up-text>
							<up-text :text="resume.seekStatus" style="margin-top: 5px;"></up-text>
						</view>
					</template>
					<template #right-icon>
						<i class="ri-arrow-right-s-line"></i>
					</template>
				</up-cell>
			</up-cell-group>
			<up-picker :show="show" :columns="columns" @click="this.show = false" @confirm="confirm"
				@cancel="this.show = false"></up-picker>
		</div>
		<div class="third-card">
			<up-cell-group :border="false">
				<up-cell @click="editAdvantage" :border="false">
					<template #title>
						<view class="u-slot-title">
							<up-text text="个人优势" color="#59A0FF" size="20px" :bold="true"></up-text>
						</view>
					</template>
					<template #right-icon>
						<i class="ri-edit-box-line"></i>
					</template>
				</up-cell>
				<up-cell :border="false">
					<template #title>
						<view class="u-slot-title">
							<up-text :text="resume.personalStrengths" size="15px" :lines="1"></up-text>
						</view>
					</template>
				</up-cell>
			</up-cell-group>
		</div>
		<div class="four-card">
			<up-cell-group :border="false">
				<up-cell @click="addWorkIntention">
					<template #title>
						<view class="u-slot-title">
							<up-text text="求职期望" color="#59A0FF" size="20px" :bold="true"></up-text>
						</view>
					</template>
					<template #right-icon>
						<i class="ri-add-circle-line"></i>
					</template>
				</up-cell>
				<div v-for="(item, index) in workdesire" :key="index">
					<up-cell @click="checkIntention(item)">
						<template #title>
							<view class="u-slot-title">
								<up-text :text="item.industryName"></up-text>
								<up-text
									:text="`${item.positionName}&nbsp&nbsp&nbsp${item.startSalary}K - ${item.endSalary}K`"
									size="15px" :bold="true"></up-text>
								<up-text :text="item.workPlace" color="#979797"></up-text>
							</view>
						</template>
						<template #right-icon>
							<i class="ri-arrow-right-s-line"></i>
						</template>
					</up-cell>
				</div>
			</up-cell-group>
		</div>
		<div class="five-card">
			<up-cell-group>
				<up-cell @click="addWorkExperience" :border="false">
					<template #title>
						<up-text text="工作经历" color="#59A0FF" size="20px" :bold="true"></up-text>
					</template>
					<template #right-icon>
						<i class="ri-add-circle-line"></i>
					</template>
				</up-cell>
				<div v-if="workExperience.size !== 0" v-for="(item,index) in workExperience" :key="index">
					<up-cell @click="editWorkExperience(item)">
						<template #title>
							<up-row>
								<up-col span="7">
									<up-text :text="item.companyName" align="left" size="17px" :bold="true"></up-text>
								</up-col>
								<up-col span="4.5">
									<up-text :text="`${item.joinDate}-${item.leaveDate}`" color="#979797"></up-text>
								</up-col>
								<up-col span="1">
									<i class="ri-arrow-right-s-line"></i>
								</up-col>
							</up-row>
							<up-row>
								<up-col span="3">
									<up-text :text="item.industry"></up-text>
								</up-col>
								<up-col span="3" offset="1">
									<up-text :text="item.occupationName"></up-text>
								</up-col>
							</up-row>
							<up-row>
								<up-col span="12">
									<up-text :text="`工作内容：${item.jobContent}`" lines="3"></up-text>
								</up-col>
							</up-row>
						</template>
					</up-cell>
				</div>
				<up-cell @click="addProExperience" :border="false">
					<template #title>
						<up-text text="项目经历" color="#59A0FF" size="20px" :bold="true"></up-text>
					</template>
					<template #right-icon>
						<i class="ri-add-circle-line"></i>
					</template>
				</up-cell>
				<div v-if="projectExperience.size !== 0" v-for="(item,index) in projectExperience" :key="index">
					<up-cell @click="editProExperience(item)">
						<template #title>
							<up-row>
								<up-col span="7">
									<up-text :text="item.projectName" align="left" size="17px" :bold="true"></up-text>
								</up-col>
								<up-col span="4.5">
									<up-text :text="`${item.startTime}-${item.endTime}`" color="#979797"></up-text>
								</up-col>
								<up-col span="1">
									<i class="ri-arrow-right-s-line"></i>
								</up-col>
							</up-row>
							<up-row v-if="item.role !== ''" style="margin-top: 5px;">
								<up-text :text="`担任角色 ：${item.role}`"></up-text>
							</up-row>
							<up-row style="margin-top: 5px;">
								<up-col span="12">
									<up-text :text="`项目描述：${item.projectDescription}`" lines="3"></up-text>
								</up-col>
							</up-row>
						</template>
					</up-cell>
				</div>
				<up-cell @click="addEduExperience" :border="false">
					<template #title>
						<up-text text="教育经历" size="20px" color="#59A0FF" :bold="true"></up-text>
					</template>
					<template #right-icon>
						<i class="ri-add-circle-line"></i>
					</template>
				</up-cell>
				<div v-if="educationExperience.size !== 0" v-for="(item,index) in educationExperience" :key="index">
					<up-cell @click="editEduExperience(item)">
						<template #title>
							<up-row>
								<up-col span="7">
									<up-text :text="item.school" align="left" size="17px" :bold="true"></up-text>
								</up-col>
								<up-col span="4.5">
									<up-text :text="`${item.enrollmentDate}-${item.graduationDate}`"
										color="#979797"></up-text>
								</up-col>
								<up-col span="1">
									<i class="ri-arrow-right-s-line"></i>
								</up-col>
							</up-row>
							<up-row v-if="item.majorRank !== null" style="margin-top: 5px;">
								<up-text :text="`专业排名 ：${item.majorRank}`"></up-text>
							</up-row>
							<up-row style="margin-top: 5px;">
								<up-col span="6">
									<up-text :text="`学历 ：${item.education}`"></up-text>
								</up-col>
							</up-row>
							<up-row style="margin-top: 5px;">
								<up-col span="12">
									<up-text :text="`在校经历：${item.schoolExperience}`" lines="3"></up-text>
								</up-col>
							</up-row>
						</template>
					</up-cell>
				</div>
			</up-cell-group>
		</div>
		<div style="margin-bottom: 50px;">
			<uni-fab ref="fab" :pattern="pattern" :content="content" :horizontal="horizontal" :vertical="vertical"
				:direction="direction" @trigger="trigger" @fabClick="fabClick" />
		</div>
		<up-overlay :show="overlayShow" @click="closeoverlay">
			<view class="warp">
				<view class="rect">
					<up-text align="right" @tap="closeoverlay" prefixIcon="close-circle" iconStyle="font-size: 24px"
						text="关闭">
					</up-text>
					<up-text :text="overlayTitle" size="20px" :bold="true" align="center"></up-text>
					<div class="aiResponse">
						<!-- <up-loading-page :loading="isload" loading-mode="spinner" loading-text="loading..."></up-loading-page> -->
						<up-loading-icon :show="isload" mode="semicircle" text="AI分析中"
							style="margin: auto;"></up-loading-icon>
						<up-empty mode="page" text='网络连接失败,请检查网路!' :show="error">
						</up-empty>
						<ua-markdown :source="aiResponse" style="width: 100%;height: 100%;" />
					</div>
				</view>
			</view>
		</up-overlay>
		<view class="save">
			<up-button type="primary" style="margin-right: 10px;width: 200px;" size="large" text="优劣势分析"
				@click="goodBad"></up-button>
			<up-button type="primary" size="large" text="AI岗位推荐" @click="recommend"></up-button>
		</view>
	</view>
</template>

<script>
	import {
		chatWithAI
	} from '../../utils/apiAi.js';
	import html2canvas from 'html2canvas';
	import {
		jsPDF
	} from 'jspdf';
	export default {
		created() {
			this.getUserResume();
			this.getUserIntentions();
			this.getUserWorkExperiences();
			this.getUserProjects();
			this.getUserEduExperiences();
		},
		onLoad() {

		},
		data() {
			return {
				resume: {
					name: '铃',
					phone: '18850723379',
					graduationYear: 24,
					age: 20,
					education: '本科',
					personalStrengths: '请填写个人优势',
					professionalSkills: '',
					image: '',
					resumeId: '',
					seekStatus: '',
				},
				show: false,
				columns: [
					['离校，随时到岗', '在校-月内到岗', '在校-考虑机会', '在校-暂不考虑']
				],
				//悬浮球
				horizontal: 'right',
				vertical: 'bottom',
				direction: 'vertical',
				//弹出层
				overlayShow: false,
				overlayTitle: '',
				userInput: '',
				aiResponse: '',
				//加载层
				isload: false,
				error: false,
				//悬浮球选项
				content: [{
						iconPath: '../../static/file-list-2-fill.png',
						// selectedIconPath: '/static/image-active.png',
						text: '简历预览',
						active: false
					},
					{
						iconPath: '../../static/openai-fill.png',
						// selectedIconPath: '/static/star-active.png',
						text: 'AI聊天',
						active: false
					}
				],

				//求职期望
				workdesire: [{
					candidateId: '',
					startSalary: 5,
					endSalary: 6,
					workPlace: '福建省-福州市',
					positionName: 'Java',
					industryName: '互联网/AI',
				}, ],
				workExperience: [{
					experienceId: '',
					resumeId: 1,
					companyName: '传一卓越',
					industry: '互联网/AI',
					occupationName: 'java',
					joinDate: '2024.06',
					leaveDate: '2024.10',
					jobContent: '负责管理维护研发项目',
					remarks: '',
				}],
				educationExperience: [{
					id: '',
					resumeId: '',
					school: '福建农林大学',
					education: '本科·全日制',
					major: '电子信息工程',
					enrollmentDate: '2019.06',
					graduationDate: '2023.06',
					majorRank: '',
					schoolExperience: '担任心理委员',
				}],
				projectExperience: [{
					experienceId: '',
					resumeId: '',
					projectName: '人才招聘',
					role: '前端设计师',
					startTime: '2024.10',
					endTime: '2024.11',
					projectDescription: '这是一个人才招聘系统',
				}]
			}
		},
		methods: {
			rightClick() {
				console.log('rightClick');
			},
			closeoverlay() {
				this.overlayShow = false; // 关闭弹出层
				this.userInput = '';
				this.aiResponse = '';
			},
			//悬浮功能求点击
			trigger(e) {
				console.log(e)
				this.content[e.index].active = !e.item.active
				if (e.item.text === 'AI聊天') {
					this.overlayShow = true
					uni.navigateTo({
						url: "/pages/ai/chatAI"
					})
				} else if (e.item.text === '简历预览') {
					let userMessage = {
						resume:this.resume,
						workExperience:this.workExperience,
						projectExperience:this.projectExperience,
						educationExperience:this.educationExperience
					};
					uni.setStorageSync('userMessage', userMessage);
					uni.navigateTo({
						url: '/pages/personal/reviewResume'
					})
				}
			},
			//悬浮球点击
			fabClick() {
				// uni.showToast({
				// 	title: '点击了悬浮按钮',
				// 	icon: 'none'
				// })
			},
			handleAdvantage(value) {
				alert(1)
				// console.log(value)
			},
			leftClick() {
				uni.navigateTo({
					url: "/pages/personal/personalView"
				})
			},
			//打开求职状态选择
			openStatusSelect() {
				this.show = true;
			},
			//前往个人信息编辑
			openPersonalMessage() {
				uni.navigateTo({
					url: "/pages/personal/personalMessageView"
				})
			},
			//求职状态确认
			confirm(e) {
				console.log(e.value[0])
				let workStatusTitle = this.resume.seekStatus;
				let selectStatus = e.value[0];
				this.resume.seekStatus = selectStatus;
				this.show = false;
				//调用数据库保存
				this.updatePersonalResume();
			},
			//前往编辑个人优势
			editAdvantage() {
				let content = encodeURIComponent(JSON.stringify(this.resume))
				//跳转页面
				uni.navigateTo({
					url: '/pages/personal/personalAdvantage?resume=' + content
				})
			},
			//修改个人简历内容
			updatePersonalResume() {
				this.$api.updateUserResume(this.resume).then((res) => {
					if (res.data === 'ok') {
						uni.showToast({
							title: '修改成功'
						})
					}
				})
			},
			//t添加工作经历
			addWorkExperience() {
				if (this.workExperience.length < 3) {
					uni.navigateTo({
						url: "/pages/personal/workExprienceView"
					})
				} else {
					uni.showToast({
						title: '最多不能超过3个哦',
						icon: 'none'
					})
				}
			},
			// 添加求职意向
			addWorkIntention() {
				if (this.workdesire.length < 10) {
					uni.navigateTo({
						url: '/pages/personal/workIntentionView?id=99'
					})
				} else {
					uni.showToast({
						title: '最多不能超过10个哦',
						icon: 'none'
					})
				}
			},
			//查看求职期望
			checkIntention(value) {
				console.log('求职id：' + value.intentionsId)
				uni.navigateTo({
					url: '/pages/personal/workIntentionView?id=' + value.intentionsId + '&total=' + this.workdesire
						.length
				})
			},
			// 编辑工作经历
			editWorkExperience(item) {
				// console.log(encodeURIComponent(JSON.stringify(item)));
				uni.navigateTo({
					url: "/pages/personal/workExprienceView?value=" + encodeURIComponent(JSON.stringify(item))
				})
			},
			//添加教育经历
			addEduExperience() {
				if (this.educationExperience.length < 3) {
					uni.navigateTo({
						url: "/pages/personal/educationExperienceView"
					})
				} else {
					uni.showToast({
						title: '最多不能超过3个哦',
						icon: 'none'
					})
				}
			},
			//编辑教育经历
			editEduExperience(item) {
				let str = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: "/pages/personal/educationExperienceView?value=" + str
				})
			},
			//添加项目经理
			addProExperience() {
				if (this.projectExperience.length < 3) {
					uni.navigateTo({
						url: "/pages/personal/projectExperienceView"
					})
				} else {
					uni.showToast({
						title: '最多不能超过3个哦',
						icon: 'none'
					})
				}
			},
			//编辑项目经历
			editProExperience(item) {
				let str = encodeURIComponent(JSON.stringify(item));
				uni.navigateTo({
					url: "/pages/personal/projectExperienceView?value=" + str
				})
			},
			//获取用户的简历信息
			getUserResume() {
				this.$api.getUserResume({
					candidateId: 1
				}).then((res) => {
					this.resume = res.data;
					// console.log(res);
				});
			},
			//获取用户的求职期望
			getUserIntentions() {
				this.$api.getIntentions({
					userId: 1
				}).then((res) => {
					// console.log(res)
					this.workdesire = res.data;
				})
			},
			//获取用户的工作经历
			getUserWorkExperiences() {
				this.$api.getUserWorkExp({
					resumeId: 1
				}).then((res) => {
					// console.log(res);
					this.workExperience = res.data;
					this.workExperience.forEach(item => {
						item.joinDate = this.changeTimeToYearMonth(item.joinDate);
						item.leaveDate = this.changeTimeToYearMonth(item.leaveDate);
					})
				})
			},
			//获取用户的项目经历
			getUserProjects() {
				this.$api.getUserProExp({
					resumeId: 1
				}).then((res) => {
					console.log(res);
					this.projectExperience = res.data;
					this.projectExperience.forEach(item => {
						item.startTime = this.changeTimeToYearMonth(item.startTime);
						item.endTime = this.changeTimeToYearMonth(item.endTime);
					})
				})
			},
			//获取用户的教育经历
			getUserEduExperiences() {
				this.$api.getUserEduExp({
					resumeId: 1
				}).then((res) => {
					console.log(res);
					this.educationExperience = res.data;
					this.educationExperience.forEach((item => {
						item.enrollmentDate = this.changeTimeToYearMonth(item.enrollmentDate);
						item.graduationDate = this.changeTimeToYearMonth(item.graduationDate);
					}))
				})
			},
			//修改工作经历的时间类型
			changeTimeToYearMonth(dateTimeStr) {
				// 创建 Date 对象  
				const date = new Date(dateTimeStr);

				// 获取年份和月份  
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1  

				// 格式化为 "年-月" 的形式  
				const formattedDate = `${year}-${month}`;
				// console.log(formattedDate)
				return formattedDate;
			},
			//优劣势分析
			goodBad() {
				this.isload = true;
				this.overlayShow = true;
				this.overlayTitle = '优劣势分析';
				this.userInput = `请帮我根据我的个人简历信息分析一下我的优劣势：
									毕业年份:${this.resume.graduationYear}年；学历：${this.resume.education};
									个人优势：${this.resume.personalStrengths};求职状态：${this.resume.seekStatus};工作经历：`;
				this.workExperience.forEach(item => {
					this.userInput +=
						`工作经历:公司:${item.companyName};职位:${item.occupationName};工作内容:${item.jobContent}.`
				});
				this.userInput += '项目经历';
				this.projectExperience.forEach(item => {
					this.userInput +=
						`项目经历:项目名称:${item.projectName};担任角色:${item.role};项目描述:${item.projectDescription}.`
				});
				this.userInput += '教育经历';
				this.educationExperience.forEach(item => {
					this.userInput +=
						`教育经历:学校：${item.school};学历：${item.education};专业：${item.major};担任职位：${item.schoolExperience}.`
				});
				console.log(this.userInput);
				this.sendMessage();
			},
			//AI岗位推荐
			recommend() {
				this.isload = true;
				this.overlayShow = true;
				this.overlayTitle = 'AI岗位推荐';
				this.userInput = `请帮我根据我的个人简历信息推荐一下我合适的工作岗位：
									毕业年份:${this.resume.graduationYear}年；学历：${this.resume.education};
									个人优势：${this.resume.personalStrengths};求职状态：${this.resume.seekStatus};工作经历：`;
				this.workExperience.forEach(item => {
					this.userInput +=
						`工作经历:公司:${item.companyName};职位:${item.occupationName};工作内容:${item.jobContent}.`
				});
				this.userInput += '项目经历';
				this.projectExperience.forEach(item => {
					this.userInput +=
						`项目经历:项目名称:${item.projectName};担任角色:${item.role};项目描述:${item.projectDescription}.`
				});
				this.userInput += '教育经历';
				this.educationExperience.forEach(item => {
					this.userInput +=
						`教育经历:学校：${item.school};学历：${item.education};专业：${item.major};担任职位：${item.schoolExperience}.`
				});
				this.userInput += '求职意向';
				this.workdesire.forEach(item => {
					this.userInput +=
						`求职意向：期望行业：${item.industryName};期望职位:${item.positionName};期望工作城市:${item.workPlace};期望薪资:${item.startSalary}k-${item.endSalary}k.`
				});
				console.log(this.userInput);
				this.sendMessage();
			},
			//AI分析
			async sendMessage() {
				if (!this.userInput.trim()) return;
				try {
					const response = await chatWithAI(this.userInput);
					this.aiResponse = response.choices[0].message.content; // 假设 API 返回包含这个结构  
					this.userInput = ''; // 清空输入框  
					this.isload = false;
				} catch (error) {
					this.isload = false;
					this.error = true;
				}
			},
		},
	}
</script>

<style>
	body {
		background-color: #f8f8f8
	}

	.first-card {
		width: 100%;
		height: 140px;
		/* margin-top: 80px; */
		background-color: white;
		/* border-bottom: 1px solid gainsboro; */
	}

	.head-img {
		margin-left: 20px;
	}

	.second-card {
		margin-top: 10px;
		width: 100%;
		height: 70px;
		background-color: white;
		/* border: 1px solid red; */
	}

	.third-card {
		width: 100%;
		height: 100px;
		/* border: 1px solid red; */
		margin-top: 10px;
		background-color: white;
	}

	.four-card {
		margin-top: 10px;
		width: 100%;
		/* border: 1px solid red; */
		background-color: white;
	}

	.five-card {
		width: 100%;
		margin-top: 10px;
		background-color: white;
		/* margin-bottom: 50px; */
	}

	.fabButton {
		float: right;
	}

	/* 弹出层样式 */
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		border-radius: 10px;
		/* 圆角边框 */
		overflow: hidden;
		/* 隐藏溢出内容 */
	}

	/* 弹出层内容样式 */
	.rect {
		width: 90%;
		/* 弹出层内容宽度 */
		max-width: 600px;
		/* 最大宽度 */
		margin: 20px auto;
		/* 居中显示 */
		padding: 20px;
		/* 内边距 */
		background-color: #fff;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
		/* 内阴影 */
		border-radius: 8px;
		/* 圆角 */
	}

	/* 关闭按钮样式 */
	.close-circle {
		font-size: 24px;
		/* 字体大小 */
		color: #ff4d4d;
		/* 字体颜色 */
		cursor: pointer;
		/* 鼠标样式 */
	}

	.save {
		/* position: fixed; */
		bottom: 0;
		width: 95%;
		background-color: #fff;
		padding: 10px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		display: flex;
	}

	.aiResponse {
		height: 420px;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: 15px;
		overflow-y: auto;
		/* border: 1px solid #ccc; */
	}
</style>